<template>
	<!-- 自定义用户列表 -->
	<div class="user-define-table">
		<div class="user-setting" style="margin-left: 20px">
			<el-icon size="24" @click="openDefineTable"><Setting /></el-icon>
		</div>
		<el-dialog class="comm-dialog" width="500" v-model="visible" draggable @open="resetDefineTable(props.defineColumns)" :append-to-body="true">
			<template #header>
				<div>
					<span>自定义列</span>
				</div>
			</template>
			<el-table :data="userTable" ref="tableNode" border @select="select" @select-all="selectAll" max-height="500">
				<el-table-column type="selection" width="50" align="center" />
				<el-table-column prop="label" label="展示名称" width="150" />
				<el-table-column prop="colWidth" label="列宽">
					<template #default="scope">
						<el-input-number style="width: 100%" :step="5" :min="50" :max="400" v-model="scope.row.colWidth" clearable />
					</template>
				</el-table-column>
			</el-table>
			<template #footer>
				<el-button type="warning" @click="resetDefineTable(props.defaultTableData)">恢复默认</el-button>
				<el-button type="success" @click="saveDefineTable">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { getMenuConfigAPI, saveMenuConfigAPI } from '@/api/userTable'
import { ElNotification } from 'element-plus'
import { mergeArrays } from '@/utils'

const visible = ref(false)
const tableNode = ref()
const userTable = reactive([]) // 自定义组件要操作的数组数据

const props = defineProps({
	defineColumns: {
		type: Array,
		default: []
	},
	defaultTableData: {
		type: Array
	},
	dataId: {
		type: String
	}
	// loading: {
	// 	type: Boolean,
	// 	required: false,
	// 	default: false
	// }
})

const emits = defineEmits(['updateDefineColumns', 'update:loading'])

// const loadinged = computed({
// 	get() {
// 		return props.loading
// 	},
// 	set(val) {
// 		emits('update:loading', val)
// 	}
// })

// 打开用户自定义列表
const openDefineTable = () => {
	visible.value = true
}

// 单选
const select = (_selection, row) => {
	row.isShow = !row.isShow
}

// 全选
const selectAll = (selection) => {
	if (selection.length) {
		selection.forEach((item) => {
			item.isShow = true
		})
	} else {
		userTable.forEach((item) => {
			item.isShow = false
		})
	}
}

// 表格数据重置
const resetDefineTable = (propdata) => {
	const data = JSON.parse(JSON.stringify(propdata))
	userTable.splice(0, userTable.length, ...data)
	// emits('updateDefineColumns', JSON.parse(JSON.stringify(data)))
	userTable.forEach((item) => {
		if (item.isShow) {
			tableNode.value.toggleRowSelection(item, true)
		}
	})
}

// 如果用户有保存的数据，就用用户保存的数据
function getDefineTable() {
	// loadinged.value = true
	const menu = { menu: props.dataId }
	getMenuConfigAPI(menu).then((res) => {
		if (res.code === 200 && res.data) {
			const data = JSON.parse(res.data.menuInfo)
			if (Array.isArray(data)) {
				const staticArray = JSON.parse(JSON.stringify(props.defaultTableData))
				const mergersArr = mergeArrays(staticArray, data, 'label')
				// userTable.splice(0, userTable.length, ...mergersArr)
				emits('updateDefineColumns', mergersArr)
				// loadinged.value = false
			}
		} else {
			// loadinged.value = false
		}
	})
}

// 保存用户设置
const saveDefineTable = () => {
	const menu = props.dataId
	const menuConfig = JSON.stringify(userTable)
	saveMenuConfigAPI({ menu, menuConfig }).then((res) => {
		if (res.code === 200) {
			ElNotification({
				title: '成功',
				message: res.msg,
				type: 'success',
				duration: 1500
			})
			emits('updateDefineColumns', userTable)
		} else {
			ElNotification({
				title: '错误',
				message: '列表数据保存失败',
				type: 'error',
				duration: 1500
			})
		}
	})
	visible.value = false
}
onMounted(() => {
	getDefineTable()
})
</script>

<style scoped lang="scss">
.user-setting {
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
